Scrollpoint

What?

Add a 'ui-fixed' class to elements when the page scrolls past them

Why?

Make elements sticky, or simply appear different after scrolling past a certain point

Remember that this directive only adds a ui-scrollpoint class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

A scrollpoint with a target set on a parent scrollable div

Resetting

If the position of the scrollpoint is moved on the page by an event such as the introduction of another element, it may be necessary to reset the scrollpoint by broadcasting the scrollpointShouldReset event from $rootScope.

Try scrolling down on the element to the left. Then click the checkbox to add an element above the scrollpoints. The scrollpoints will now no longer be properly calculates relative to the parent until the reset button is clicked.

Using a variable

You can pass a variable to change de detected y-offset of the element.
The element will be updated accordingly if the value is valid.
Example: <div ui-scrollpoint="{{ scrollpoint }}"></div>

Try changing the value of scrollpoint

A scrollpoint with a custom class

Works as normal, but allows a custom ui-scrollpoint-class to be applied.
Example: <div ui-scrollpoint-class="my-scroll-class"></div>

You can also apply multiple scrollpoint classes.
Example: <div ui-scrollpoint-class="my-scroll-class another-scroll-class"></div>

A scrollpoint with a custom action

Scrollpoint @ {{actionDistance}}px.

Works as normal, but allows a ui-scrollpoint-action to be fired when scrolled past.
Example: <div ui-scrollpoint-action="scrollAction"></div>

<script>
$scope.scrollAction = function(element, distance){
    // scroll events are triggered by DOM, so use $scope.$apply();
    $scope.$apply(function(){
        $scope.actionClass = (distance < 0) ? 'warning' : 'info';
        $scope.actionDistance = distance;
    });
};
</script>
                        

Bottom Scrollpoint

Calculates scrollpoint from the bottom of its target instead of top.
Example: <div ui-scrollpoint="100" ui-scrollpoint-bottom="true"></div> would activate the scrollpoint if the window is scrolled above 100 pixels from the bottom.

Bottom Scrollpoint with parent target

Calculates scrollpoint from the bottom of its target instead of top.
Example: <div ui-scrollpoint="+15" ui-scrollpoint-bottom="true"></div> would activate the scrollpoint when it is 15 pixels from the bottom of its target.